{xmi_shop_template 'common/header'}

<div id="container">
    {xmi_shop_template 'common/nav'}
    <div id="content" >
        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">

                    <a title="添加" href="/web/index.php?c=site&a=entry&m=xmi_shop&do=web&r=goods.page_edit" class="btn btn-primary" data-original-title="添加">
                        <i class="fa fa-plus"></i>
                    </a>
                    <!--
                    <button title="复制" class="btn btn-default" data-original-title="复制">
                        <i class="fa fa-copy"></i>
                    </button>
                    -->
                    <button title="删除" class="btn btn-danger"
                            v-on:click="delete_goods()"
                            data-original-title="删除">
                        <i class="fa fa-trash-o"></i>
                    </button>
                </div>
                <h1>商品管理</h1>
                <ul class="breadcrumb">
                    <li><a href="">首页</a></li>
                    <li><a href="">商品管理</a></li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">        <div class="row">
            <div id="filter-product" class="col-sm-12 hidden-sm hidden-xs">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-filter"></i> 筛选</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="control-label" for="input-name">商品名称</label>
                                    <input type="text" name="filter_name" value=""
                                           v-model="filter.name"
                                           placeholder="商品名称" id="input-name" class="form-control"
                                           autocomplete="off">
                                    <ul class="dropdown-menu"></ul>
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="input-name">商品品牌</label>
                                    <input type="text" name="filter_name" value=""
                                           v-model="filter.brand_name"
                                           placeholder="商品品牌" id="input-brand" class="form-control" >
                                </div>

                                <div class="form-group hidden">
                                    <label class="control-label" for="input-model">商品型号</label>
                                    <input type="text" name="filter_model" value="" placeholder="商品型号"
                                           id="input-model" class="form-control" autocomplete="off">
                                    <ul class="dropdown-menu"></ul>
                                </div>
                                <div class="form-group hidden">
                                    <label class="control-label" for="input-sku">SKU</label>
                                    <input type="text" name="filter_sku"
                                           value="" placeholder="SKU" id="input-sku"
                                           class="form-control" autocomplete="off">
                                    <ul class="dropdown-menu"></ul>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="control-label" for="input-price">销售价格</label>
                                    <input type="text" name="filter_price"
                                           v-model="filter.price"
                                           value="" placeholder="20-120,20-,-120" id="input-price" class="form-control">
                                </div>
                                <div class="form-group hidden">
                                    <label class="control-label" for="input-quantity">库存数量</label>
                                    <input type="text" name="filter_quantity" value="" placeholder="库存数量" id="input-quantity" class="form-control">
                                </div>
                                <div class="form-group hidden">
                                    <label class="control-label " for="input-stock-quantity">库存区间</label>
                                    <input type="text" name="filter_stock_quantity" value=""
                                           placeholder="10-20" id="input-stock-quantity" class="form-control">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="control-label" for="input-status">状态</label>
                                    <select name="filter_status"
                                            v-model="filter.status"
                                            id="input-status" class="form-control">
                                        <option value="">全部</option>
                                        <option value="1">已上架</option>
                                        <option value="0">已下架</option>
                                    </select>
                                </div>

                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label class="control-label" for="input-category">商品分类</label>
                                    <input type="text" v-model="filter.category_name" value="" placeholder="商品分类"  class="form-control">
                                </div>
                                <div class="form-group hidden">
                                    <label class="control-label " for="input-image">主图</label>
                                    <select name="filter_image" id="input-image" class="form-control">
                                        <option value="">全部</option>
                                        <option value="1">有主图</option>
                                        <option value="0">无主图</option>
                                    </select>
                                </div>
                                <div class="form-group hidden">
                                    <label class="control-label" for="input-show-variant">显示子产品</label>
                                    <select name="filter_show_variant" id="input-show-variant" class="form-control">
                                        <option value="1" selected="selected">显示</option>
                                        <option value="0">隐藏</option>
                                    </select>
                                </div>
                                <div class="form-group text-right">
                                    <div class="btn-group">
                                        <button disabled=""
                                                class="dropdown-toggle btn btn-success hidden"
                                                id="batch-edit" type="button"
                                                data-toggle="dropdown">批量修改
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu batch-edit-item" role="menu">
                                            <li>
                                                <a href="javascript:void(0)" data-type="price">商品<span>价格</span></a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)" data-type="quantity">商品<span>库存</span></a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0)" data-type="status">商品<span>下架</span></a>
                                            </li>
                                        </ul>
                                    </div>
                                    <button type="button" id="button-filter"
                                            v-on:click="get_list()"
                                            class="btn btn-default">
                                        <i class="fa fa-filter"></i> 筛选</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-list"></i> 商品列表</h3>
                    </div>
                    <div class="panel-body">

                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <td style="width: 1px;" class="text-center">
                                        <input type="checkbox"
                                               v-on:click="check_all( $event )"
                                               id="all-selected">
                                    </td>
                                    <td class="text-left">
                                        <a href="">ID</a> </td>
                                    <td class="text-center">图片</td>
                                    <td class="text-left">
                                        <a href="">商品名称</a> </td>
                                    <td class="text-left">
                                        <a href="">商品品牌</a> </td>
                                    <td class="text-left">
                                        <a href="">商品分类</a> </td>
                                    <td class="text-left">
                                        <a href="">商品型号</a> </td>
                                    <td class="text-right">
                                        <a href="">价格</a> </td>
                                    <td class="text-right">
                                        <a href="">销量</a> </td>
                                    <td class="text-left">
                                        <a href="">状态</a> </td>
                                    <td class="text-right">管理</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item,index in goods_list"
                                    v-show="index>=(page.current-1)*page.item_num&&index<page.current*page.item_num">
                                    <td class="text-center selected-item">
                                        <input type="checkbox"
                                               v-model="checked_goods"
                                               v-bind:value="item.id"  >
                                    </td>
                                    <td class="text-center">
                                        <span>{{item.id}}</span>
                                    </td>
                                    <td class="text-center">
                                        <img v-bind:src="item.image" alt="" class="img-thumbnail">
                                    </td>
                                    <td class="text-left name-editor">
                                        <span>{{item.name}}</span>
                                    </td>
                                    <td class="text-left brand-editor">
                                        <span>{{item.brand_name}}</span>
                                    </td>
                                    <td class="text-left category-editor">
                                        <span>{{item.category_name}}</span>
                                    </td>
                                    <td class="text-left model-editor" data-item="model">
                                        <span>{{item.model}}</span>

                                    </td>
                                    <td class="text-right price-editor" data-item="price">

                                        <span v-bind:style="{'text-decoration':(item.special>0?'line-through':'')}">￥{{item.price}}</span>
                                        <span v-if="item.special>0">￥{{item.special}}</span>
                                    </td>
                                    <td class="text-right quantity-editor" data-item="quantity">
                                        <span class="label label-success">{{item.sale}}</span>
                                    </td>
                                    <td class="text-left">
                                        <div class="bootstrap-switch-on bootstrap-switch-mini bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-animate"
                                             style="width: 94px;">
                                            <div class="bootstrap-switch-container"
                                                 v-bind:style="{'margin-left': item.status==1?0:-46 + 'px'}"
                                                 style="width: 138px; " >
                                                <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 46px;">已上架</span>
                                                <span class="bootstrap-switch-label" style="width: 46px;">状态</span>
                                                <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 46px;">已下架</span>
                                                <input type="checkbox" name="product-status-toggle" data-id="29" checked="">
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-right">
                                        <div class="btn-group" style="min-width: 65px;">
                                            <a v-bind:href="'{php echo $this->url_pre;}&r=goods.page_edit&goods_id='+item.id"
                                               data-toggle="tooltip" title="" class="btn btn-primary"
                                               data-original-title="编辑">
                                                <i class="fa fa-pencil"></i>
                                            </a>
                                            <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle hidden">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right" >
                                                <li>
                                                    <a href="javascript:void(0);" class="btn-variant" data-id="29">
                                                        <i class="fa fa-cog"></i> 编辑子商品
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="" target="_blank">
                                                        <i class="fa fa-search"></i> 查看
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="row">
                            <div class="col-sm-6 text-left">
                                <ul class="pagination" v-if="page.total">
                                    <li v-for="item in page.total"
                                        v-show="item>=page.current-1 && item <= page.current+1"
                                        v-bind:class="{'active':item == page.current?1:0}"
                                        v-on:click="goto_page( item )"
                                    >
                                        <span>{{item }}</span>
                                    </li>
<!--                                    <li><a href="">2</a></li>-->
                                    <li v-on:click="goto_page(page.current+1)"><a>&gt;</a></li>
                                    <li v-on:click="goto_page(page.total)"><a>&gt;|</a></li>
                                </ul></div>
                            <div class="col-sm-6 text-right">
                                显示{{(page.current-1)*page.item_num+1}} - {{page.current*page.item_num}}
                                / 合计 {{page.item_total}}（共 {{page.total}} 页）
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

<script>
    setTimeout(function(){

        var vue = new Vue({
            el:'#container',
            data:function(){
                return {

                    checked_goods:[],
                    filter:{

                        name:'',
                        brand_name:'',
                        status:'',
                        price:'',
                        category_name:''
                    },

                    page:{

                        total:0,
                        item_total:0,//总数量
                        item_num:10, //每页数量
                        current:1
                    },
                    config:{

                        web_url:'{php echo $this->url_pre;}',
                    },
                    search:{

                    },
                    goods_list:[]
                }
            },

            methods:{


                get_list:function(){

                    var t = this;

                    var url = this.config.web_url + '&r=goods.get_list';

                    if( this.filter.name ){
                        url += '&name=' + this.filter.name;
                    }
                    if( this.filter.status!= '' ) {
                        url += '&status=' + this.filter.status;
                    }
                    if( this.filter.price ){
                        url += '&price=' + this.filter.price;
                    }
                    if( this.filter.category_name ){
                        url += '&category_name=' + this.filter.category_name;
                    }

                    if( this.filter.brand_name ){
                        url += '&brand_name=' + this.filter.brand_name;
                    }

                    axios.get( url ).then(function( res ){

                        t.goods_list = res.data;
                        t.page.item_total = res.data.length;
                        t.page.total = parseInt( t.page.item_total / t.page.item_num );
                        t.page.total += res.data.length % t.page.item_num?1:0;

                    });

                },

                goto_page:function( current ){

                    current = current<=this.page.total?current:this.page.total;
                    this.page.current = current;

                },

                check_all:function( e ){

                    var t = this;
                    this.checked_goods = [];
                    if( e.srcElement.checked ){
                        this.goods_list.forEach(function( item ){
                            t.checked_goods.push( item.id );
                        });
                    }

                },

                delete_goods:function(){

                    var t = this;
                    if( this.checked_goods.length == 0 ){
                        alert('请选中要删除的商品');
                        return;
                    }

                    var url = this.config.web_url + '&r=goods.remove';

                    var data = 'ids=';

                    this.checked_goods.forEach(function( item ){
                        data += item + ',';
                    });
                    data = data.replace(/,$/,'');
                    axios.post(url, data ).then(function( res ){

                        location.href = t.config.web_url + '&r=goods.page_list';
                    });


                }


            },

            created:function(){

                this.get_list();
            }
        });

    },2000);


</script>
{xmi_shop_template 'common/footer'}